想法：

年底要到台北跟三五好友去跨年，想要搭火車去台北，車票多少錢?

程式需求：

不用按鈕，直接輸入「數量」可立即看到總金額 (數量*票價)

重點語法：

$(this) : 觸發事件的當前元素
closest() ： 往上查找 只要找到符合條件的 就停止尋找
val()：獲取數值
find() ： 搜索元素

HTML：

• 利用ul li建立火車票價欄位。
• li裡面都含「路線標題」、「票價/1人」、「車票數」、「價錢」
• 「車票數」預設值為1
• 最下方的「價錢」設置 id，程式運算的結果放在此，使它即時更新價錢

其他：data 為html5新增的屬性，可以暫存數值或是程式來存取資料
W3C data屬性：https://www.w3schools.com/tags/att_global_data.asp

<h2>火車 票價表：</h2>
<ul>
  <li class="ticket" data-price ="300">
    <h4>高雄台南來回</h4>
    <p>$300/1人</p>
    <p>數量：
      <input type="number" class="quantity" value ="1">
    </p>
    <p>價錢：$<span id ="total">300</span></p>
  </li>
  <li class="ticket" data-price ="500">
    <h4>台中台北來回</h4>
    <p>$500/1人</p>
    <p>數量：
      <input type="number" class="quantity" value ="1">
    </p>
    <p>價錢：$<span id ="total">500</span></p>
  </li>
  <li class="ticket" data-price ="800">
    <h4>高雄台北來回</h4>
    <p>$800/1人</p>
    <p>數量：
      <input type="number" class="quantity" value ="1">
    </p>
    <p>價錢：$<span id ="total">800</span></p>
  </li>
</ul>

jQuery：

因為不要按鈕，所以要想輸入就得到結果，就是監聽「鍵盤事件」：
「keypress」、「keydown」、「keyup」
這次案例因為輸入鍵盤要即時顯示價錢，所以適用「keyup」輸入即顯示。

  $('.ticket').on( 'keyup','.quantity',function(){
   
  });

在這監聽事件要做到下列事情：

• 獲取車票單價(data-price)
• 得到input項目中輸入的數量
• 根據單價乘以數量得到總價，並顯示

獲取車票單價(data-price)：取得數值

//獲取車票單價(data-price)
var price = $(this).closest('.ticket').data('price');
//表達式前面加 + 則傳回計算用的數值,就能運算
var price = +$(this).closest('.ticket').data('price');

得到input項目中輸入的數量

 // 觸發keyup事件為input,用this得到input元素，要得到input輸入的數值，用val()
 var quantity = $(this).val();
 //表達式前面加 + 則傳回計算用的數值,就能運算
 var quantity = +$(this).val();

根據單價乘以數量得到總價，並顯示

//觸發keyup事件往上找'.ticket'，並往下找到'#total'
$(this).closest('.ticket').find('#total');
//在'#total'放置 價格和數量相乘的結果
$(this).closest('.ticket').find('#total').text(price*quantity);

結果如圖：

但是滑鼠去點擊增加則沒反應，所以要再增加滑鼠事件。

新增click監控事件，內容與keyup相同

 $('.ticket').on( 'click','.quantity',function(){
 //與keyup同樣內容
 }

結果如下：

codepen網址：https://codepen.io/yuski/pen/eymYRM